<template>
	<view class="container container31915">
		<view class="register-main">
			<view class="register-main-top">
				<view class=" register-top-hi"> HI~ 欢迎来到 </view>
				<view class=" register-top-desc"> 相随交友平台 </view>
				<view class=" register-top-btn">
					<view class="register-top-btn-txt">
						祝你早日遇到那个Ta
					</view>
				</view>
				<view class="flex diygw-autoview  flex-direction-column autoview2-clz"> </view>
			</view>
			<u-form class="register-main-form" :model="form" :rules="formRules" ref="formRef" :label-width="120" :label-style="{
				height: '33rpx',
				fontWeight: 600,
				fontSize: '34rpx',
				color: '#000000',
				lineHeight: '60rpx'
			}">
				<u-form-item label="手机号" class="mobile-clz radius" labelPosition="top" prop="mobile">
					<u-input :focus="formData.mobileFocus" class="register-main-form-input" placeholder="请输入你的手机号"
						v-model="form.mobile">
						<view class="mobile-prefix" slot="prefix">
							+ 86
						</view>
					</u-input>
				</u-form-item>
				<view class="register-main-form-line"></view>
				<u-form-item label="验证码" class="input-clz radius" labelPosition="top" prop="input">
					<u-input :focus="formData.inputFocus" class="register-main-form-input" placeholder="验证码"
						v-model="form.captcha"></u-input>
					<u-code :seconds="seconds" @end="end" @start="start" ref="uCode" @change="codeChange"></u-code>
					<view @tap="getFormInputCode" class="register-main-form-sendbtn radius-xs white">
						<view class="register-main-form-sendbtn-txt">
							{{ tips }}
						</view>
					</view>
				</u-form-item>
				<view class="register-main-form-line"></view>
				<!-- <u-verification-code seconds="60" startText="获取验证码" ref="inputCodeRef" @change="changeFormInputCode"></u-verification-code> -->
				<view class="register-main-form-btn flex  flex-direction-column justify-center button-clz radius"
					@click="submitForm">
					<view class="register-main-form-btn-txt">登录</view>
				</view>
				<u-form-item class="" labelPosition="top" prop="checkbox">
					<u-radio-group>
						<u-radio activeColor="#AE00FF" :key="1" @change="radioChange" />
						我已认真阅读并同意《用户协议》及《隐私政策》
					</u-radio-group>
				</u-form-item>
			</u-form>
			<view class="register-bottom flex">
				<view class="">
					没有账号，
				</view>
				<view class="register-bottom-txt" @click="goPage('register')">
					去注册
				</view>
			</view>
			<view class="clearfix"></view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				//用户全局信息
				userInfo: {},
				//页面传参
				globalOption: {},
				//自定义全局变量
				globalData: {},
				checkboxDatas: [{
					value: '1',
					label: '同意《软件用户协议》'
				}],
				checkbox: ['1'],
				formRules: {
					mobile: [{
						trigger: ['change', 'blur'],
						required: true,
						message: '账户不能为空'
					}]
				},
				form: {
					mobile: '',
					password: '',
					captcha: ''
				},
				formData: {
					mobileFocus: false,
					passwordFocus: false,
					inputFocus: false,
					inputTag: '获取验证码',
					inputFlag: false
				},
				/**
				 * 倒计时
				 */
				tips: '获取验证码',
				// refCode: null,
				seconds: 10,
			};
		},
		onLoad() {
			this.init();
		},
		onReady() {
			this.$refs.formRef?.setRules(this.formRules);
		},
		methods: {
			goPage(name){
				this.$Router.push({
					name:name
				})
			},
			async init() {
				await this.initResetform();
			},
			codeChange(text) {
				this.tips = text;
			},
			changeFormInputCode(text) {
				this.formData.inputTag = text;
			},
			getFormInputCode() {
				if (this.$refs.uCode.canGetCode) {
					// 模拟向后端请求验证码
					this.$api.sendCode(this.form.mobile, 'mobilelogin').then(({
						data
					}) => {
						uni.$u.toast('验证码已发送');
						setTimeout(() => {
							uni.hideLoading();
							// 这里此提示会被this.start()方法中的提示覆盖
							
							// 通知验证码组件内部开始倒计时
							this.$refs.uCode.start();
						}, 2000);
					}).catch(({
						msg
					}) => {
						console.log('code-msg-err',msg)
						uni.$u.toast(msg);
					})

				} else {
					uni.$u.toast('倒计时结束后再发送');
				}
			},
			initResetform() {
				this.initform = JSON.stringify(this.form);
			},
			resetForm() {
				this.form = JSON.parse(this.initform);
			},
			end() {},
			start() {},
			async submitForm(e) {
				this.$refs.formRef?.setRules(this.formRules);

				this.$nextTick(async () => {
					let valid = await this.$refs.formRef.validate();
					if (valid) {
						this.$api.mobilelogin(this.form.mobile, this.form.captcha, 'mobilelogin').then(({
							data
						}) => {
							console.log('data-login',data)
							uni.setStorageSync('access_token', data.token)
							this.goPage('index')
						})
					} else {
						console.log('验证失败');
					}
				});
			}
		}
	};
</script>

<style lang="scss" scoped>
	.register-main {
		.register-main-top {
			background-image: url('/static/images/c696d084b59508ca55da4b7e15b11321fd33860014e30d-MvZckb.png');
			background-size: cover;
			width: 750rpx;
			height: 611rpx;

			.register-top-hi {
				padding-left: 70rpx;
				padding-top: 275rpx;
				height: 39rpx;
				font-family: PingFang SC;
				font-weight: bold;
				font-size: 40rpx;
				color: #000000;
				line-height: 60rpx;
				margin-bottom: 26rpx;
			}

			.register-top-desc {
				padding-left: 70rpx;
				height: 48rpx;
				font-family: FZLanTingHeiS-H-GB;
				font-weight: 400;
				font-size: 50rpx;
				color: #000000;
				line-height: 60rpx;
				margin-bottom: 34rpx;
			}

			.register-top-btn {
				margin-left: 70rpx;
				width: 293rpx;
				height: 60rpx;
				background: #AE00FF;
				border-radius: 30rpx;
				text-align: center;

				.register-top-btn-txt {
					height: 23rpx;
					font-weight: bold;
					font-size: 24rpx;
					color: #FFFFFF;
					line-height: 60rpx;
				}
			}
		}

		.register-main-form {
			padding: 74rpx 76rpx;

			.register-main-form-line {
				width: 600rpx;
				height: 1rpx;
				background: #B7B7B7;
				margin-bottom: 45rpx;
			}

			.mobile-clz {}

			.mobile-prefix {
				font-weight: 600;
				font-size: 34rpx;
				color: #000000;
			}

			.register-main-form-input {
				height: 100rpx;
			}

			.register-main-form-btn {
				width: 600rpx;
				height: 90rpx;
				background: linear-gradient(119deg, #EDA7F3, #AE00FF);
				border-radius: 45rpx;
				border: 1px solid #D8D8D8;
				display: flex;
				justify-content: center;
				align-items: center;

				.register-main-form-btn-txt {
					font-weight: 600;
					font-size: 30rpx;
					color: #FFFFFF;
					line-height: 60rpx;
				}
			}

			.register-main-form-sendbtn {
				width: 159rpx;
				height: 55rpx;
				border-radius: 28rpx;
				border: 1px solid #AE00FF;
				text-align: center;

				.register-main-form-sendbtn-txt {
					height: 23rpx;
					font-family: PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #AE00FF;
					line-height: 60rpx;
				}
			}
		}
		
		.register-bottom {
			text-align: center;
			justify-content: center;
			.register-bottom-txt {
				color: #AE00FF;
			} 
		}
	}
</style>